/*
 * @Author: kanglang
 * @Date: 2020-07-13 18:43:17
 * @LastEditors: kanglang
 * @LastEditTime: 2021-03-24 18:14:32
 * @Description: 运单详情地图
 */
import React, { Component } from 'react';
import {
    StyleSheet, Text, View, Image, TouchableOpacity, StatusBar,
    Dimensions, ScrollView, FlatList, NativeModules,
    InteractionManager, Platform, ClippingRectangle,
    DeviceEventEmitter,NativeEventEmitter
} from 'react-native';
import { isAndroid, mainBgColorLightGray, px2dp } from '../../../common/styles';
import MapView from '../../../components/MapView';


export default class YdDetailMap extends Component {

    constructor(props) {
        super(props);
        this.state = ({
            showModal: false
        })
    }

    componentDidMount() {
        // alert('zeki')
        if (isAndroid) {
            this.payListenerAndroid();
        } else {
            this.payListenerIOS();
        }
        this.refs['mapView'].nativeMethod('onCreate')
        this.refs['mapView'].nativeMethod('startLocation')

    }
    componentWillUnmount() {
        this.listener.remove();
        this.zoomListener.remove();
        this.refs['mapView'].nativeMethod('onDestroy')
    }
    // 安卓定位回调监听
    payListenerAndroid = () => {
        this.listener = DeviceEventEmitter.addListener('LOCATION_RESULT', (json) => {
            // this.drawOverlay("icon_map_car", [{ lat: 29.551064, lon: 106.460247 }])
            this.drawOverlayTotal([{ lat: 29.551064, lon: 106.460247, num: 888 },
            { lat: 29.651064, lon: 106.460247, num: 233 },
            { lat: 29.751064, lon: 106.460247, num: 34242 }])
            this.drawLine([
                { lat: 29.551064, lon: 106.460247 },
                { lat: 29.507146, lon: 106.442757 },
                { lat: 29.578033, lon: 106.364568 }])
        });
        this.zoomListener = DeviceEventEmitter.addListener('MAP_ZOOM_LEVEL', (level) => {
            console.log("缩放等级变化：" + level)
        });
    };
    // ios定位回调监听
    payListenerIOS = () => {
        const { GJCommonEmitter } = NativeModules;
        const calendarManagerEmitter = new NativeEventEmitter(GJCommonEmitter);

        this.listener = calendarManagerEmitter.addListener('LOCATION_RESULT', (str) => {
            this.drawOverlay("icon_map_car", [{ lat: 29.551064, lon: 106.460247 }])
            this.drawOverlayTotal([{ lat: 29.551064, lon: 106.460247, num: 888 },
            { lat: 29.651064, lon: 106.460247, num: 233 },
            { lat: 29.751064, lon: 106.460247, num: 34242 }])
            // this.drawLine([{ lat: 29.551064, lon: 106.460247 }, { lat: 29.507146, lon: 106.442757 }, { lat: 29.578033, lon: 106.364568 }])
        });
        this.zoomListener = calendarManagerEmitter.addListener('MAP_ZOOM_LEVEL', (level) => {
            console.log("缩放等级变化：" + level)
        });
    };
    //定位当前位置
    positionCenter = () => {
        this.refs['mapView'].nativeMethod('startLocation')
    }
    drawOverlay(icon, list) {
        this.refs['mapView'].nativeMethod('drawOverlay', [{ icon: icon }, { list: list }])
    }
    drawOverlayTotal(list) {
        this.refs['mapView'].nativeMethod('drawOverlayTotal', [{ list: list }])
    }
    drawLine(list) {
        this.refs['mapView'].nativeMethod('drawLine', [{ list: list }])
    }
    openModal = () => {
        this.setState({ showModal: !this.state.showModal });
    }
    render() {
        const { showModal } = this.state;
        return (
            <View style={styles.container}>

                <MapView
                    ref='mapView'
                    locationIcon={'icon_position_export'}
                    style={{ width: '100%', height: '100%' }}

                />
                <TouchableOpacity
                    style={styles.map_position}
                    onPress={() => {
                        this.positionCenter()
                    }}
                >
                    <Image style={styles.map_position_image} source={require('../../../image/wl/icon_Positioning.png')} />
                </TouchableOpacity>
            </View>
        );
    }
}
const styles = StyleSheet.create({
    container: {
        flex: 1,
        width: Dimensions.get("window").width,
        height: Dimensions.get("window").height,
    },
    map_position: {
        width: px2dp(76),
        height: px2dp(76),
        backgroundColor: '#fff',
        borderRadius: px2dp(12),
        position: 'absolute',
        left: px2dp(32),
        bottom: px2dp(244),
        flexDirection: 'row',
        justifyContent: 'center',
        alignItems: 'center',
    },
    map_position_image: {
        width: px2dp(40),
        height: px2dp(40),
    }
});